<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">应用名称</label>
        <el-input v-model="query.clientName" clearable placeholder="应用名称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" >
        <el-tooltip slot="right" class="item" effect="dark" content="数据库中表字段变动时使用该功能" placement="top-start">
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-refresh"
            @click="syncData"
          >同步</el-button>
        </el-tooltip>
      </crudOperation>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="700px">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
          <el-form-item label="APPID">
            <el-input v-model="form.clientId" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="应用名称">
            <el-input v-model="form.clientName" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="资源">
            <el-input v-model="form.resourceIds" style="width: 515px;" />
          </el-form-item>
          <el-form-item label="授权类型" prop="authGrantTypes">
            <el-select
                v-model="form.authGrantTypes" style="width: 515px"
                multiple placeholder="请选择" @remove-tag="deleteTag" @change="changeGrantTypes">
                <el-option
                  v-for="item in grantTypesA"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
            </el-select>
          </el-form-item>
          <el-form-item label="回调地址">
            <el-input v-model="form.redirectUri" style="width: 515px;" />
          </el-form-item>
          <el-form-item label="令牌有效时间" prop="accessTokenValidity">
            <el-input-number v-model.number="form.accessTokenValidity" :min="0" :max="999999" controls-position="right" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="令牌刷新时间" prop="refreshTokenValidity">
            <el-input-number v-model.number="form.refreshTokenValidity" :min="0" :max="999999" controls-position="right" style="width: 200px;" />
          </el-form-item>
          <el-form-item label="显示次序" prop="clientSort">
            <el-input-number v-model.number="form.clientSort" :min="0" :max="999" controls-position="right" style="width: 112px;" />
          </el-form-item>
          <el-form-item label="自动操作" prop="autoapprove">
            <el-radio-group v-model="form.autoapprove" size="mini">
              <el-radio-button label="true">是</el-radio-button>
              <el-radio-button label="false">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否可用" prop="enable">
            <el-radio-group v-model="form.enable" size="mini">
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="clientId" label="应用ID" />
        <el-table-column prop="clientName" label="应用名称" />
        <el-table-column prop="grantTypes" label="授权类型" />
        <el-table-column prop="redirectUri" label="回调地址" />
        <el-table-column prop="clientSort" label="排序" />
        <el-table-column v-permission="['admin','rbacClient:edit','rbacClient:del']" label="操作" width="250px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission">
              <el-button slot="right" size="mini" type="primary" icon="el-icon-view" @click="crud.toEdit(data)" />              
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudRbacClient, {sync} from '@/api/rbacClient'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

let clientGrantTypes = []
const defaultForm = { id: null, clientId: null, resourceIds: null, grantTypes: null, redirectUri: null, accessTokenValidity: null, refreshTokenValidity: null, createTime: null, modifyTime: null, autoapprove: 'true', clientName: null, clientSort: 1, enable: '1' }
export default {
  name: 'RbacClient',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['有效性'],
  cruds() {
    return CRUD({ title: '认证中心', url: 'api/rbacClient', sort: 'id,desc', crudMethod: { ...crudRbacClient }})
  },
  data() {
    return {
      permission: {
        add: ['admin', 'rbacClient:add'],
        edit: ['admin', 'rbacClient:edit'],
        del: ['admin', 'rbacClient:del']
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'clientName', display_name: '应用名称' }
      ],
      grantTypesA: [
        { id: 'authorization_code', name: 'authorization_code'},
        { id: 'password', name: 'password'},
        { id: 'refresh_token', name: 'refresh_token'},
        { id: 'implicit', name: 'implicit'},
        { id: 'client_credentials', name: 'client_credentials'}
      ]
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    changeGrantTypes(value) {
      clientGrantTypes = []
      value.forEach(function(data, index) {
        const cgt = { id: data }
        clientGrantTypes.push(cgt)
      })
    },
    deleteTag(value) {
      clientGrantTypes.forEach(function(data, index) {
        if (data.id === value) {
          clientGrantTypes.splice(index, value)
        }
      })
    },
    syncData() {
      sync().then(() => {
        this.crud.refresh()
        this.crud.notify('同步成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        
      }).then(() => {
        
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  /deep/ .vue-treeselect__control, /deep/ .vue-treeselect__placeholder, /deep/ .vue-treeselect__single-value {
    height: 30px;
    line-height: 30px;
  }
</style>
